<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--vue的js库-->
    <script src="../js/vue.js"></script>
    <!--axios的ajax的js库-->
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<!--定义div区域，并赋值id属性，供vue管理-->
<div id="abc">
    <!--定义表格标签-->
    <table border="1" cellspacing="0" width="1000">
        <!--tr一行-->
        <tr>
            <!--th：一列表头-->
            <th>编号</th>
            <th>姓名</th>
            <th>图像</th>
            <th>性别</th>
            <th>职位</th>
            <th>入职时间</th>
            <th>最后操作时间</th>
        </tr>

        <!--本tr上 遍历vue中的persons数组  定义了thisPerson当前循环的对象，i当前的索引-->
        <tr v-for="(thisPerson,i) in persons" align="center">
            <!--获取索引i+1变成序号，插值表达式-->
            <td>{{i + 1}}</td>
            <!--获取当前对象的name属性值，插值表达式-->
            <td>{{thisPerson.name}}</td>
            <!-- 获取当前对象的image属性值，属性绑定，绑定img标签的src属性 -->
            <td>
                <img :src="thisPerson.image" height="70">
            </td>
            <!-- 获取当前对象的gender属性值，if判断，根据1，2显式男女 -->
            <td>
                <span v-if="thisPerson.gender == 1 ">男</span>
                <span v-if="thisPerson.gender == 2 ">女</span>
            </td>
            <td>{{thisPerson.job}}</td>
            <td>{{thisPerson.entrydate}}</td>
            <td>{{thisPerson.updatetime}}</td>
        </tr>
    </table>
</div>
</body>
<script>
    new Vue({  //创建了一个vue对象
        el: "#abc",  //挂载网页元素，使网页被vue管理起来
        data: {      //定义vue中的变量
            persons: []   //定义了一个叫做persons的变量，并强调该变量只能存储数组
        },
        methods: {   //定义vue中的方法
            getData() {  //一个名叫getData的方法，这里的功能是发送ajax获取数据
                //立即发送ajax请求数据
                axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list")  //指定ajax请求的服务器地址
                    .then((resp) => {    //处理服务器返回的数据
                        console.log(this.persons);   //获取数据前打印了变量persons
                        //将数据记录在data中的persons中
                        //注意：访问vue中的变量或方法，必须在其前边加this.
                        this.persons = resp.data.data;  //resp.data是返回的数，从数据中获取众多属性中的data属性
                        console.log(this.persons);  //获取数据后打印了变量persons
                    })
            }
        },
        mounted() {  //生命周期方法，时机：页面挂载完毕后
            //页面加载完毕后，调用getData
            this.getData();
        }
    })

</script>
</html>